import { useState } from "react";
import { useEffect } from "react";
import { forwardRef, useRef } from "react";

const Child = forwardRef((props, ref) => { // 函数式组件的 ref 转发
  return (
    <div ref={ ref }>child</div>
  )
})

const App = () => {
  const childRef = useRef()
  const btnRef = useRef()

  useEffect(() => {
    console.log(childRef.current)
    console.log(btnRef.current)
  }, [])

  // 发现 3秒后打印了用户输入的每一次的值
  // const [name, setName] = useState('') // 每次修改状态，都相当于重新创建了name
  // useEffect(() => {
  //   setTimeout(() => {
  //     console.log('name', name)
  //   }, 3000)
  // })

  // 发现 3秒后打印了用户输入的最终值
  const [name, setName] = useState('')
  const newName = useRef(name) // `ref` 在所有 Render 过程中保持着唯一引用
  useEffect(() => {
    newName.current = name
    setTimeout(() => {
      console.log('newName', newName)
    }, 3000)
  })

  return (
    <div>
      <Child ref = { childRef }></Child>
      <button ref = { btnRef }>按钮</button>

      <input type="text" onChange = { event => setName(event.target.value) } />
    </div>
  );
};

export default App;